<template>
  <div>
    <el-card shadow="hover" style="margin-bottom: 20px" :body-style="{padding: '0px'}">
      <el-image :src="item.gsrc"></el-image>
      <div style="margin-left: 10px;margin-right: 10px;margin-bottom: 10px">
        <el-row>
          <el-col :span="24">
            <el-link type="primary" style="font-size: 18px;margin-top: 5px" :data-bs-target="'#modal'+'-'+item.gid" data-bs-toggle="modal">{{item.gname}}</el-link>
          </el-col>
        </el-row>
        <el-row style="color: orangered;font-weight: bold">
          <el-col :span="24">¥ {{item.gprice}}</el-col>
        </el-row>
        <el-row style="margin-top: 5px;font-size: 12px">
          <el-col :span="12" class="bi-graph-up"> 销量:{{item.gselled}}</el-col>
          <el-col :span="12" class="bi-box"> 库存:{{item.gnumber}}</el-col>
        </el-row>
        <el-row style="float: left;font-size: 13px;margin-bottom: 10px">
          <el-col :span="24"><el-link :underline="false" type="info" @click="route()">{{item.sname}}</el-link></el-col>
        </el-row>
      </div>
    </el-card>

    <div :id="'modal'+'-'+item.gid" class="modal fade" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">选择商品</h4><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6">
                <el-card style="margin-bottom: 20px" :body-style="{padding: '0px'}">
                  <el-image :src="item.gsrc"></el-image>
                  <div style="margin-left: 10px;margin-right: 10px;margin-bottom: 10px">
                    <el-row>
                      <el-col :span="24">
                        <el-link type="primary" style="font-size: 18px;margin-top: 5px">{{item.gname}}</el-link>
                      </el-col>
                    </el-row>
                    <el-row style="color: orangered;font-weight: bold">
                      <el-col :span="24">¥ {{item.gprice}}</el-col>
                    </el-row>
                    <el-row style="margin-top: 5px;font-size: 12px">
                      <el-col :span="12" class="bi-box"> 库存:{{item.gnumber}}</el-col>
                    </el-row>
                    <el-row style="float: left;font-size: 13px;margin-bottom: 10px">
                      <el-col :span="24"><el-link :underline="false" type="info">{{item.sname}}</el-link></el-col>
                    </el-row>
                  </div>
                </el-card>
              </div>
              <div class="col-md-6">
                <el-row>
                  <el-col :span="24" style="height: 40px;text-align: left">
                    <p style="line-height: 40px" class="bi-123"> 商品数量</p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="height: 40px">
                    <el-input-number :min="1" v-model="cart.cnumber"></el-input-number>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="height: 40px;text-align: left">
                    <p style="line-height: 40px" class="bi-cursor"> 地址</p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="height: 40px">
                    <el-input style="line-height: 40px" v-model="cart.clocal"></el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="height: 40px">
                    <p style="line-height: 40px" class="bi-currency-yen">总价格</p>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24" style="height: 40px;font-weight: bold;color: red;font-size: 20px">
                    <p style="line-height: 40px">¥{{this.cart.cnumber*item.gprice}}</p>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <el-button data-bs-dismiss="modal">取消</el-button>
            <el-button type="primary" data-bs-dismiss="modal" class="bi-cart" @click="addToCart()"> 添加到购物车</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Good",
  props:['item'],
  data(){
    return{
      cart:{
        sid: this.item.sid,
        gid: this.item.gid,
        uid: sessionStorage.getItem("uid"),
        cnumber:'',
        clocal:''
      },
    }
  },
  methods:{
    route(){
      this.$router.push({path:'/ventor',query:{id:this.item.sid}});
    },
    addToCart(){
      if (sessionStorage.getItem("isLogin")===null){
        this.$message.warning("请先登录");
      } else if (this.cart.clocal === ''){
        this.$message.error("请输入地址");
      } else if (this.cart.cnumber>this.item.gnumber){
        this.$message.error("商品数量超过库存数量");
      } else {
        axios.post('http://r44734h518.zicp.vip:41569/cart/insertIntoCart',this.cart).then(res=>{
          this.$notify.success("添加成功");
        })
      }
    }
  },
  watch:{

  }
}
</script>

<style scoped>

</style>
